<template>
  <div class="mod-config" style="background:#f9f9f9;">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getCensusData()">
      <el-form-item>
        <el-date-picker
          v-model="dataForm.date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getCensusData()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="circle">
      <sector style="width:400px;" :key="key" :opinionData="opinionData"></sector>
    </div>
  </div>
  <!--饼状图-->
</template>

<script>
import sector from "@/components/echarts/sector.vue";
export default {
  data() {
    return {
      dataForm: {
        date: "",
      },
      key: new Date().getTime(),
      opinionData: [],
    };
  },
  watch: {
    key: function () {
      this.key = new Date().getTime();
    },
  },
  components: {
    sector,
  },
  methods: {
    getCensusData() {
      if (this.dataForm.date == "" || this.dataForm.date == undefined) {
        this.dataForm.date = this.getNowFormatDate();
      }
      this.$http({
        url: this.$http.adornUrl(`/headmaster/census/sector/${this.dataForm.date}`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var census = data.census;
          this.opinionData = [],
          this.opinionData.push({
            value: census.punchStudent,
            name: "已打卡",
          });
          this.opinionData.push({
            value: census.noPunchStudent,
            name: "未打卡",
          });
          this.key = new Date().getTime();
        } else {
          this.$message.error("查询打卡详情失败,请稍后再试");
        }
      });
    },
    getNowFormatDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + "-" + month + "-" + strDate;
      return currentdate;
    },
  },
  activated() {
    this.getCensusData();
  },
};
</script>
<style scoped>
.circle{
  display:flex;
  align-items: center;
  justify-content: center;
}
</style>
